<script setup>
</script>
<template>
  <div>
    <el-form :inline="true" :model="query" align="left" >
      <el-form-item>
        <el-button type="primary" @click="add" :inline="true">新增球员</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="tableData"
        border
        style="width: 100%"
    >
      <el-table-column
          prop="id"
          label="编号">
      </el-table-column>
      <el-table-column
          prop="name"
          label="球员姓名">
      </el-table-column>
      <el-table-column
          prop="sex"
          label="性别">
      </el-table-column>
      <el-table-column
          prop="hobby"
          label="爱好">
      </el-table-column>
      <el-table-column
          prop="createtime"
          label="入队时间"
          width="180">
        <template slot-scope="scope">
          {{scope.row.createtime|format("yyyy-MM-dd")}}
        </template>
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态">
      </el-table-column>
<el-table-column
    label="操作"
    width="180">
<template slot-scope="scope">
  <el-button type="primary"  @click="del(scope.row)">删除</el-button>
  <el-button type="primary"  @click="update(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="query.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <el-dialog :title="this.mode.s" :visible.sync="dialogVisible">
    <el-form :model="form">
      <el-form-item label="球员姓名" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="球员性别" :label-width="formLabelWidth">
        <template>
          <el-radio-group v-model="form.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </template>
      </el-form-item>
      <el-form-item label="爱好" :label-width="formLabelWidth">
        <el-checkbox-group v-model="formHobby">
          <el-checkbox label="吃饭">吃饭</el-checkbox>
          <el-checkbox label="睡觉">睡觉</el-checkbox>
          <el-checkbox label="打豆豆">打豆豆</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="入职时间" :label-width="formLabelWidth">
        <el-date-picker
            v-model="form.createtime"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="goUp">确 定</el-button>
    </div>
  </el-dialog>
  </div>
</template>
<style scoped>
</style>
<script>
export default {
  data(){
    return {
      formLabelWidth: '120px',
      query:{
        page:1,
        size:3,
        state:"",
        tid:'',
      },
      list:[],
      mode:{
        s:"",
        url:"",
      },
      form:{},
      tableData:[],
      total:0,
      dialogVisible:false,
      formHobby:[]
    }
  },
  created(){
    this.findPage();
    this.findAll();
  },
  methods: {
    findPage() {
      this.axios.post("http://localhost:9000/players/findPage", this.query).then(res => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      })
    },
    handleSizeChange(val) {
      this.query.size = val;
      this.findPage();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.findPage();
    },
    add() {
      this.mode.s = "新增球员";
      this.dialogVisible = true;
      this.mode.url = "http://localhost:9000/players/save";
    },
    update(row) {
      this.mode.s = "编辑球员";
      this.dialogVisible = true;
      this.mode.url = "http://localhost:9000/players/update";
      this.form = row;
      this.formHobby = row.hobby.split(",");
    },
    goUp() {
      this.form.hobby = this.formHobby.join(",");
      this.axios.post(this.mode.url, this.form).then(res => {
        if (res.data.code == 0) {
          this.$message.success(this.mode.s + "成功")
          this.form = {};
          this.formHobby = [];
        } else {
          this.$message.error(this.mode.s + "失败")
          this.form = {};
          this.formHobby = [];
        }
        this.dialogVisible = false;
        this.findPage();
      })
    },
    del(row) {
      this.axios.get("http://localhost:9000/players/delete?id=" + row.id).then(res => {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (res.data.code == 0) {
            this.$message.success("删除成功")
          } else {
            this.$message.error("删除失败")
          }
          this.findPage();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      })
    },
  },
  filters:{
    format(value,arg){
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份
          "d": date.getDate(), //日
          "h": date.getHours(), //小时
          "m": date.getMinutes(), //分
          "s": date.getSeconds(), //秒
          "q": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }

      return dateFormat(value,arg);

    }
  },
}
</script>